<template>
  <!-- <zk-navigationBar />  :style="{ height: height + 'px' }"-->
  <view id="login">
    <view class="login_box card" v-if="isServe">
      <view class="login_title flex fw_600">
        <text class="fs_30 fw_700">欢迎登录WMS系统</text>
        <text class="fs_16">请先进行服务器地址配置</text>
      </view>
      <view class="card_body">
        <view class="my_input">
          <view class="flex">
            <image
              src="@/static/img/login_sever/server.png"
              class="mini_Icon" />
            <input
              type="text"
              v-model.trim="serverAddress"
              placeholder="服务器地址"
              placeholder-style="font-size: 14px;color: rgb(219, 219, 219);" />
          </view>
          <image
            v-if="serverAddress"
            src="@/static/img/login_sever/right.png"
            class="mini_Icon icon" />
          <!-- <image
            v-else
            src="@/static/img/login_sever/wrong.png"
            class="mini_Icon icon" /> -->
        </view>
      </view>
      <view class="click_submit fs_20" @tap="setSerev"> 配置 </view>
    </view>
    <view class="login_box card" v-else>
      <view class="login_title flex fw_600 m_bottom">
        <text class="fs_30 fw_700">欢迎登录WMS系统</text>
        <text class="fs_16">请输入账号密码</text>
      </view>
      <view class="card_body">
        <view class="my_input">
          <view class="flex">
            <image src="@/static/img/login_sever/zh.png" class="mini_Icon" />
            <input
              v-model="account"
              type="text"
              placeholder="请输入账号"
              placeholder-style="font-size: 14px;color: rgb(219, 219, 219);" />
          </view>
          <!-- <image
            v-if="1"
            src="@/static/img/login_sever/right.png"
            class="mini_Icon icon" /> -->
          <!-- <image
            v-else
            src="@/static/img/login_sever/wrong.png"
            class="mini_Icon icon" /> -->
        </view>
        <view class="my_input">
          <view class="flex">
            <image
              src="@/static/img/login_sever/change_Password.png"
              class="mini_Icon" />
            <input
              v-model="password"
              type="password"
              placeholder="请输入密码"
              placeholder-style="font-size: 14px;color: rgb(219, 219, 219);" />
          </view>
          <!-- <image
            v-if="1"
            src="@/static/img/login_sever/right.png"
            class="mini_Icon icon" />
          <image
            v-else
            src="@/static/img/login_sever/wrong.png"
            class="mini_Icon icon" /> -->
        </view>
      </view>

      <view class="click_submit fs_20" @tap="login"> 登录 </view>
      <view class="fs_16 goServer" @tap="goSetServer">服务器配置</view>
    </view>
  </view>
  <zk-tips v-if="toast.show" :title="title"> </zk-tips>
</template>

<script lang="ts" setup>
import { useToastStore } from "@/stores/modules/toast";
import { useMemberStore } from "@/stores/modules/member";
import { setBaseURLIp } from "@/utils/api/http";
const userStore = useMemberStore();
const toast = useToastStore();
const height = uni.getStorageSync("contentHeight");
const title = ref(""); //错误提示
const isServe = ref(false); //配置服务器地址
const isLogin = ref(true); //是否登录
const serverAddress = ref(userStore.baseIP); //服务器地址
const account = ref(""); //账号
const password = ref(""); //密码
//配置服务器地址
const setSerev = () => {
  if (serverAddress.value.trim() == "") {
    toast.show = true;
    title.value = "请输入服务器地址！";
    return;
  }
  setBaseURLIp(serverAddress.value);
  userStore.baseIP = serverAddress.value;

  setTimeout(() => {
    uni.showToast({
      title: "配置成功！",
      icon: "success",
      duration: 1500,
      mask: true,
    });
    isServe.value = false;
    isLogin.value = true;
  }, 300);
};
//登录
const login = async () => {
  uni.showLoading({
    title: "登录中...",
    mask: true,
  });
  await userStore.login({ account: account.value, password: password.value });
  uni.hideLoading();
};
//跳转到服务器配置页面
const goSetServer = () => {
  isServe.value = true;
  isLogin.value = false;
  account.value = "";
  password.value = "";
};
</script>

<style lang="scss" scoped>
#login {
  width: 100vw;
  height: 100vh;
  background: url("../../static/img/login_sever/bg.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .login_box {
    border-radius: 8px;
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    .login_title {
      flex-direction: column;
      color: rgb(0, 7, 24);
      margin-bottom: 10px;
    }
    .card_body {
      width: 100%;
      .my_input {
        padding: 12px 0 12px 20px;
        position: relative;
        margin: 10px 0;
        input {
          padding: 0px 20px 0px 8px;
          width: 100%;
          height: 100%;
          font-size: 16px;
        }
        border: 1px solid rgb(219, 219, 219);
        border-radius: 10px;
        .icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .click_submit {
      border-radius: 10px;
      background: rgb(50, 150, 111);
      color: #fff;
      width: 100%;
      padding: 12px 0;
      text-align: center;
      margin-top: 20px;
      cursor: pointer;
    }
    .goServer {
      color: rgb(181, 188, 201);
      margin: 20px 0 0 0;
    }
  }
}
</style>
